<!-- 个人中心 -->
<template>
	<view class="container">
		<cu-custom bgColor="bg-blue" :isBack="false">
			<!-- <block slot="backText">返回</block> -->
			
		</cu-custom>


		<!-- 顶部背景 -->
		<!-- margin-top:' + CustomBar + 'px; -->
		<view class='UCenter-bg' :style="'background-image: url(' + pic[topBackGroupImageIndex].link + ');'">
			<view class='space' v-show="spaceShow">
				<view class="stars ">
					<view class="star "></view>
					<view class="star pink "></view>
					<view class="star blue "></view>
					<view class="star yellow "></view>
				</view>
			</view>

			<block>

				<view class='text-center' @click="goCurrentUserInfo">
					<!-- <view class="cu-avatar2 round xl margin-right-sm shadow-blur-lg bg-img open-data">
						<open-data type="userAvatarUrl"></open-data>
					</view> -->
					<view class="cu-avatar2 round xl margin-right-sm shadow-blur-lg bg-img open-data" style="overflow: hidden;margin-top:-60upx;">
						<image src="../../static/cm_logo.png" style="width: 100%; height: 100%;"></image>
					</view>
					<view class="padding text-white text-xl text-bold" style="padding:10upx 30upx;">
						你好，{{userInfo.name}}({{userInfo.seat}})
					</view>
					
					<view class="padding text-white text-xl text-bold" v-if="userInfo.shownum != '' && userInfo.shownum != null" style="padding:10upx 30upx;" >
						回拨余额：{{cbData.balance == null ? 0 : cbData.balance}}
						剩余分钟数：{{cbData.min == null ? 0 : cbData.min}}
					</view>
					
					<view class="padding text-white text-xl text-bold" style="padding:10upx 30upx;" >
						到期时间：{{(userInfo.ex_type == 1 )? '长期有效':userInfo.expire_time}}
					</view>

				</view>
			</block>

			<image
				src='../../static/me/3dbaa72a-062b-470f-9b9d-058ff8f85ab8.gif'
				mode='scaleToFill' class='gif-wave'></image>
		</view>

		<view style="padding: 20rpx 0px;margin: 20rpx 0px 50px 0;">

			<view class="cu-list-s">

				<view class="cu-item " v-for="(item,index) in menu" :key="index + 1" @click="item.callback">
                    <image v-if="item.img" :src="item.img" class='png' mode='aspectFit'></image>
                    <text class='texts'>{{item.text}}</text>
				</view>

			</view>
            
            <view class="cu-list-s ">
            
            	<view class="cu-item " v-for="(item,index) in menuTwo" :key="index + 1" @click="item.callback">
          
            			<image v-if="item.img" :src="item.img" class='png' mode='aspectFit'></image>
            			<text class='texts'>{{item.text}}</text>
            		
            	</view>
            
            </view>
		</view>
		<view class="app-version" v-if="appVersion" @dblclick="handleUploadLog()">
			<u-divider bg-color="none" >版本号:{{appVersion}}</u-divider>
		</view>
	</view>
</template>

<script>

	import {
		getLogout,
		getSeatInfo,
        getCbPhoneNumberInfo
	} from '@/api/auth.js';
	
	import {
	    getAPPVersion
	} from "@/api/config.js";
	
	import {
		mapGetters,mapState
	} from "vuex";
	
	import checkVersion from '@/pages/upgrade/checkVersion.js';
	
	import {getDayStr} from '@/utils/data.js';
    import websip from "./websip.vue"; //WEBSIP应用
	
	// import phoneMonitor from "@/utils/PhoneStateListener.js";
    
    let that;
	
	const callModule = uni.requireNativePlugin("leven-call-CallModule");

	export default {
		data() {
			return {
				// Custom: this.Custom,
				// CustomBar: this.CustomBar,
				spaceShow: true,
				modalName: "",
				picName: '流星之夜',
				pic: [{
					link: '../../static/me/zjx_me_bg6.jpg',
					name: '天空'
				}],
				topBackGroupImageIndex: 0,
				inter: [{
					title: 'mimicry',
					name: '活力春天',
					color: ''
				}, ],
				cleanSize: '',
				appVersion: "",
                appVersionCode:0,
				menu: [
					{
						text: "个人设置",
						callback: this.goCurrentUserInfo,
						// icon: "cuIcon-profile text-pink  icon-style  "
                        img:"../../static/info/info/avatar.png"
					},
					{
						text: "修改密码",
						callback: this.changePassword,
						img: "../../static/likeFx/6.png"
					},
					{
						text: "数据统计",
						callback: this.getReport,
						img: "../../static/info/info/enterprise_data.png"
					}
				],
                menuTwo: [
                    {
                    	text: "权限设置",
                    	callback: this.goSetting,
                    	img: "../../static/likeFx/17.png"
                    },
                    // {
                    // 	text: "意见反馈",
                    // 	callback: this.changeFackbook,
                    // 	img: "../../static/likeFx/11.png"
                    // },
					{
						text: "在线升级",
						callback: this.getAppUpgrade,
						img: "../../static/likeFx/22.png"
					},
                    // {
                    // 	text: "清除日志",
                    // 	callback: this.goCloseAppLog,
                    // 	img: "../../static/likeFx/12.png"
                    // },
                    {
                    	text: "上传日志",
                    	callback: this.handleUploadLog,
                    	img: "../../static/likeFx/3.png"
                    },
					{
						text: "退出应用",
						callback: this.goCloseApp,
						img: "../../static/likeFx/29.png"
					},
                    {
                    	text: "退出登录",
                    	callback: this.goClose,
                    	img: "../../static/likeFx/27.png"
                    },
					{
						text: "通话状态",
						callback: this.handleGetCallStatus,
						img: "../../static/likeFx/27.png"
					}
                ],
                
                cbData:{
                    balance:0,
                    min:0
                },
				
				phonetype:-1,
				phoneNumber:''
			}
		},

		// watch: {
		// 	topBackGroupImageIndex(val) {
		// 		if (val == 4 || val == 5) {
		// 			this.spaceShow = true;
		// 		} else {
		// 			this.spaceShow = false;
		// 		}
		// 	}
		// },
        components:{
            websip
        },
		computed: {
			...mapGetters(["userInfo","taskType","PageCur"]),
			...mapState({
				taskType:state => state.task.taskType,
				PageCur:state => state.tabbar.PageCur,
                userInfo:state=>state.user.userInfo
			} )
		},
		mounted() {
            that = this;
            
			this.getAppInfo();
			console.log("me mounted",this.userInfo);
            
            this.handleCbPhoneNumberInfo();
            
            // 缓存大小
            this.cleanSize = `${uni.getStorageInfoSync().currentSize} kb`;
			
			
			// phoneMonitor.startListening((event) => {
			//     console.log("me 通话状态变化:", event);
			//     // 处理事件：更新UI、记录日志等
			//     // switch (event.type) {
			//     //     case "incoming":
			//     //       uni.showToast({ title: `来电: ${event.number}`, icon: "none" });
					  
			//     //       break;
			//     //     case "outgoing":
			//     //       uni.showToast({ title: `去电: ${event.number}`, icon: "none" });
			//     //       break;
			//     //     case "call_end":
			//     //       uni.showToast({ title: "通话结束", icon: "none" });
			//     //       break;
			//     // }
			// });
		},
		
		beforeUnmount() {
			console.log("me beforeunmount");
		    phoneMonitor.stopListening(); // 页面销毁时停止监听
		  },

		created() {
			// this.getAppInfo();
			// 缓存大小
			this.cleanSize = `${uni.getStorageInfoSync().currentSize} kb`;
		},

		methods: {
			handleInitData(){
                
            },
			

			//测试获取通话状态
			handleGetCallStatus(){
				this.phoneNumber = '10010';
				
				this.handleCallPhoneState();
				
				plus.device.dial(this.phoneNumber,false);
			},
			
			//监听通话状态
			handleCallPhoneState(){
				let _this = this;
				
				console.log("监听通话状态 开始：",_this.phoneNumber);
				
				if(_this.phoneNumber != '' && _this.phoneNumber != undefined){
					let maintest = plus.android.runtimeMainActivity();
					let Contexttest = plus.android.importClass("android.content.Context");
					let telephonyManager = plus.android.importClass("android.telephony.TelephonyManager");
					let telManager=plus.android.runtimeMainActivity().getSystemService(Contexttest.TELEPHONY_SERVICE);
					
					// 获取通话状态
					const callState = telManager.getCallState();

					let stateInfo = '';
					switch (callState) {
						case telephonyManager.CALL_STATE_IDLE: // 0
							stateInfo = '空闲状态（无通话）';
							break;
						case telephonyManager.CALL_STATE_RINGING: // 1
							stateInfo = '响铃状态（来电响铃）';
							break;
						case telephonyManager.CALL_STATE_OFFHOOK: // 2
							stateInfo = '摘机状态（通话中）';
							break;
						default:
							stateInfo = '未知状态';
					}
					
					console.log("stateinfo",stateInfo);
				}
			},
			
			handleCallPhoneStatesss(){
				let _this = this;
				
				console.log("监听通话状态 开始：",_this.phoneNumber);
				
				if(_this.phoneNumber != '' && _this.phoneNumber != undefined){
					let maintest = plus.android.runtimeMainActivity();
					let Contexttest = plus.android.importClass("android.content.Context");
					let telephonyManager = plus.android.importClass("android.telephony.TelephonyManager");
					let telManager=plus.android.runtimeMainActivity().getSystemService(Contexttest.TELEPHONY_SERVICE);
					let receiver=plus.android.implements('io.dcloud.android.content.BroadcastReceiver', {
						onReceive: function(Contexttest, intent) {
							// plus.android.importClass(intent);
							// console.log(intent.getAction());
			
							let phonetype=telManager.getCallState();
							let phoneNumber = intent.getStringExtra(telephonyManager.EXTRA_INCOMING_NUMBER);
							console.log("监听通话 状态，phonetype:",phonetype,phoneNumber); //电话状态 0->空闲状态 1->振铃状态 2->通话存在
							
							_this.phonetype = phonetype;
							switch (phonetype) {
								case 0:
									// _this.getCallLog();
									_this.end_time = Math.round(new Date().getTime() / 1000);
									
									_this.getCallEnd();
									
									console.log('监听通话 空闲状态aaa');
									break;
								case 1:
									console.log('监听通话 振铃状态bbb');
									break;
								case 2:
									console.log('监听通话 通话存在ccc');
									_this.start_time = Math.round(new Date().getTime() / 1000);
									break;
							}						
						}
					});
					let IntentFilter = plus.android.importClass('android.content.IntentFilter');
					let filter = new IntentFilter();
					filter.addAction(telephonyManager.ACTION_PHONE_STATE_CHANGED);
					maintest.registerReceiver(receiver, filter);
				}
			},
            
            //获取回拨号码信息
			handleCbPhoneNumberInfo(){
                if(this.userInfo.shownum != "" && this.userInfo.shownum != null && this.userInfo.shownum != undefined){
                    getCbPhoneNumberInfo({'seat':this.userInfo.seat,'shownum':this.userInfo.shownum}).then(res=>{
                        console.log("getCbPhoneNumberInfo res",res);
                        
                        if(res.data.data != null){
                            this.cbData = res.data.data;
                        }
                    }).catch(err=>{
                        //接口错误
                        this.$config.log("获取回拨号码信息 getCbPhoneNumberInfo err",err);
                    });
                    
                    uni.stopPullDownRefresh();
                }
            },
            
			changeFackbook() {
				uni.navigateTo({
					url: "/pages/me/changeFacebook"
				})
			},
			goSetting() {
				uni.navigateTo({
					url: "/pages/me/setting"
				})
			},
			changePassword() {
				uni.navigateTo({
					url: "/pages/me/changePassword"
				})
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
            
            getReport(){
                uni.navigateTo({
                	url: '/pages/me/seatReport'
                	
                })
            },

			hideModal(e) {
				this.modalName = null
			},
			//个人中心
			goCurrentUserInfo() {
				uni.navigateTo({
					url: '/pages/me/currentUserInfo'
					
				})
			},
			getAppInfo() {
				let that = this;
                let current_appid = plus.runtime.appid;
                
                if(current_appid != "" && current_appid != undefined && current_appid != null){
                    plus.runtime.getProperty(current_appid, function(inf) {
                        that.appVersion = inf.version;
                        that.appVersionCode = inf.versionCode;
                    })
                }
			},
			
			getSeatData(){
                if(this.userInfo.seat != undefined && this.userInfo.seat != "" && this.userInfo.seat != null){
                    getSeatInfo({seat:this.userInfo.seat}).then(res=>{
                        console.log("getSeatdata res",res);
                        
                        that.$store.dispatch("setUserInfo",res.data.data);
                    }).catch(err=>{
                        //接口错误
                        this.$config.log("获取坐席信息 getSeatInfo err",err);
                    });
                    
                    uni.stopPullDownRefresh();
                }
			},
            
            //清除日志
            goCloseAppLog(){
                this.$console.removeFile(30).then(res=>{
                    console.log("removefile res",res);
                    
                    uni.showToast({
                    	title: '清除日志成功',
                    	duration: 2000,
                    	icon: "success"
                    });
                }).catch(err=>{
                    console.log("removefile err",err);
                });
            },
			
			//上传日志
			handleUploadLog(){
				let file_path = '_doc/logs/' + getDayStr() + ".txt";
				
				console.log("handleupdatelog",plus.io.PRIVATE_DOC);

				//获取服务器地址
				let baseApiUrl = uni.getStorageSync("baseApiUrl");
				let base_url = 'http://' + baseApiUrl + '/';
				
				uni.uploadFile({
					url: base_url + 'api/AppIndex/uploadVoiceFile',
					filePath: file_path,
					name: "file",
					header:{
						'content-type' : 'multipart/form-data'
					},
					formData: {
						seat: uni.getStorageSync("userInfo").seat,
						account:uni.getStorageSync("userInfo").seat,
						filePath: file_path
					},
					success: (res_upload) => {
						console.log("res_upload",res_upload);
						
						uni.showToast({
							title: '日志上传成功',
							duration: 2000,
							icon: "success"
						});
					},
					fail(err) {
						console.log("fail",err);
					},
					complete(){
						console.log("complete");
					}
				})

				let db_path = '_doc/tel.db';
				uni.uploadFile({
					url: base_url + 'api/AppIndex/uploadVoiceFile',
					filePath: db_path,
					name: "file",
					header:{
						'content-type' : 'multipart/form-data'
					},
					formData: {
						seat: uni.getStorageSync("userInfo").seat,
						account:uni.getStorageSync("userInfo").seat,
						filePath: db_path
					},
					success: (res_upload) => {
						console.log("res_upload",res_upload);
						
						// uni.showToast({
						// 	title: '日志上传成功',
						// 	duration: 2000,
						// 	icon: "success"
						// });
					},
					fail(err) {
						console.log("fail",err);
					},
					complete(){
						console.log("complete");
					}
				})
				
			},
			
			//退出APP应用
			goCloseApp(){
				//先清除定时器
				clearInterval(this.$globalData.taskTimer);
				this.$globalData.taskTimer = null;
				
				clearInterval(this.$globalData.threadTimer);
				this.$globalData.threadTimer = null;
				
				//注销通话监听
				callModule.unRegisterListener(res => {
				  console.log("unRegisterListener",res);
				  this.$console.info("注销通话监听 unRegisterListener",res);
				});
				
				//APP转到后台时强制设置为接受
				this.$store.dispatch("setTaskType",1);
				this.$store.dispatch("setPageCur","index");
				
				uni.removeStorageSync("userInfo");
				uni.removeStorageSync("token");
                
                //退出web-view
                websip.methods.handleSendMessage('logout',{});
				
				//退出APP,从后台关闭
				let main = plus.android.runtimeMainActivity();
				let System = plus.android.importClass("System");
				let Intent = plus.android.importClass("android.os.Process");
				let Build = plus.android.importClass("android.os.Build");
					
				//检测版本
				if (Build.VERSION.SDK_INT >= 21) {
					//销毁当前应用所有Activity并且将此任务从最近任务列表中移除
					main.finishAndRemoveTask();
				}
		
				// 获取APP的进程ID
				let pid = Intent.myPid();
				// 杀死进程
				Intent.killProcess(pid);
				// 系统退出
				System.exit(0);
			},
			
			//在线升级
			getAppUpgrade(){
                let _this = this;
				getAPPVersion().then(res=>{
					console.log("getappversion res",res);
                    const selfVersionCode = Number(uni.getSystemInfoSync().appVersionCode); //当前App版本号
                    console.log('getAPPVersion selfversioncode',selfVersionCode,uni.getSystemInfoSync());
				    if (res.data.code == 200) {
				    	let appData = res.data.data;
				    	if (appData != null && appData != '') {
                            
				            let name= "新版本V" + appData.app_version;//新版本名称
				            let code= appData.app_version_code; //新版本号（数字）
				            let url= appData.download_url;//app下载链接，（演示请换成真正在下载链接）
				            let forceUpdate = appData.is_force == 1 ? true : false;//是否强制更新
				            
				            let content = appData.app_content == null ? '' : `${appData.app_content}`;//更新内容
                            
                            if(Number(code) <= Number(_this.appVersionCode)){
                                uni.showToast({
                                	title: '没有新版本更新',
                                	duration: 2000,
                                	icon: "warning"
                                });
                            }else{
                                checkVersion({
                                    name,//最新版本名称
                                    code,//最新版本号
                                    content,//更新内容
                                    url,//下载链接
                                    forceUpdate//是否强制升级			  
                                });
                            }
				        }
				    }
				});
				
			},
			
			// 退出登录
			goClose() {
				uni.showModal({
					content: '确定要退出登陆吗',
					success: e => {
						if (e.confirm) {
							//直接退出，清空数据
							this.$store.dispatch("setUserInfo", {});
							// uni.clearStorageSync();
							this.cleanSize = '0 kb';
							
							uni.removeStorageSync("userInfo");
							uni.removeStorageSync("token");
							
							//先清除定时器
							clearInterval(this.$globalData.taskTimer);
							this.$globalData.taskTimer = null;
							
							clearInterval(this.$globalData.threadTimer);
							this.$globalData.threadTimer = null;
                            
                            //退出web-view
                            websip.methods.handleSendMessage('logout',{});
							
							//注销通话监听
							callModule.unRegisterListener(res => {
							  console.log("unRegisterListener",res);
							  this.$console.info("注销通话监听 unRegisterListener",res);
							});
							
							//APP转到后台时强制设置为接受
							this.$store.dispatch("setTaskType",0);
							
							this.$store.dispatch("setPageCur","index");
							
							uni.reLaunch({
								url: '/pages/index/login',
							});

						}
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	.container{
		width: 100%;
		color: #333333;
		background-image: linear-gradient(to bottom, #075AFF, #ffffff);
		background-size: 100% 45%;
		background-repeat: no-repeat;
		background-position: top center;
		overflow-y: scroll;
	}
	.app-version {
		font-size: 14px;
		text-align: center;
		margin: 5px auto;
        margin-top:20px;
		color: #ccc;
		height: 120px;
		width:100%;
        float:left;
        clear:both;
	}
    
    .cu-list-s{
        width:96%;
        height:auto;
        float:left;
        clear:both;
        margin-left:2%;
        margin-bottom:30rpx;
        background-color: #fff;
        border-radius: 30rpx;
    }
    
    .cu-item{
        width:24%;
        float:left;
        height:auto !important;
        margin-left:1%;
        padding-top:30rpx;
        padding-bottom:30rpx;
        
        // background-color: #ccc;
    }

    
    .cu-item .png{
        width:80rpx !important;
        height:80rpx;
        margin:0 auto;
        display: block;
    }
    
    .texts{
        width:100%;
        float:left;
        clear:both;
        display: block;
        line-height: 40rpx;
        text-align: center;
    }

	.UCenter-bg {
		background: #fff;
		background-size: 100% 100%;
		/* background-size: cover; */
		height: 450rpx;
		display: flex;
		justify-content: center;
		padding-top: 40rpx;
		overflow: hidden;
		position: relative;
		flex-direction: column;
		align-items: center;
		color: #fff;
		font-weight: 300;
		text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
	}

	.UCenter-bg text {
		opacity: 0.8;
	}

	.UCenter-bg image {
		width: 200rpx;
		height: 200rpx;
	}

	.UCenter-bg .gif-wave {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		z-index: 99;
		mix-blend-mode: screen;
		height: 100rpx;
	}


	// 头像
	.cu-avatar2 {
		font-variant: small-caps;
		margin: 0;
		padding: 0;
		display: inline-flex;
		text-align: center;
		justify-content: center;
		align-items: center;
		background: #ccc;
		color: #fff;
		white-space: nowrap;
		position: relative;
		width: 150rpx;
		height: 150rpx;
		background-size: cover;
		background-position: center;
		vertical-align: middle;
		font-size: 1.5em;
		z-index: 99;
	}

	.name {
		text-shadow: 2px 2px 1px #2f9bfe;
	}

	.dialog2 {
		background: none;
	}

	.saicode {
		background-size: 100% 100%;
		-moz-background-size: 100% 100%;
	}

	.img-big image {
		top: -40px;
		width: 280rpx;
		height: 280rpx;
	}


	.shadow-me {
		box-shadow: 0rpx 0rpx 100rpx 0rpx rgba(0, 0, 0, 0.1);
	}

	.tn-footerfixed {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 1024;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.35);
	}

	.my_logo {
		background: none;
		padding: 50rpx 0 30rpx 0;
	}

	.my-radius {
		border-radius: 12rpx;
		overflow: hidden
	}

	.my-icon image {
		width: 100rpx;
		height: 100rpx;
		display: inline-block;
		margin: 0 auto
	}

	.my-iconcolor {
		background: rgba(255, 255, 255, 0.96)
	}

	.shadow-shop {
		box-shadow: 0rpx 0rpx 90rpx 0rpx rgba(0, 0, 0, 0.1);
	}

	.qrcode-img {
		position: fixed;
		width: 80rpx;
		height: 80rpx;
		bottom: 350rpx;
		right: 30rpx;
		z-index: 1024;
		opacity: 0.8;
		box-shadow: 0rpx 8rpx 30rpx 0rpx rgba(0, 0, 0, 0.3);
		border: none
	}


	/* 数字背景 */
	.shadow-warp-my {
		position: relative;
		box-shadow: 0 10rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.shadow-warp-my:before,
	.shadow-warp-my:after {
		position: absolute;
		content: "";
		top: 20rpx;
		bottom: 30rpx;
		left: 20rpx;
		width: 50%;
		box-shadow: 0 30rpx 20rpx rgba(0, 0, 0, 0.16);
		transform: rotate(-6deg);
		z-index: -1;
	}

	.shadow-warp-my:after {
		right: 20rpx;
		left: auto;
		transform: rotate(6deg);
	}


	.bg-product {
		background-image: linear-gradient(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0));
		color: #fff;
	}

	.margin-bottom-my {
		margin-bottom: 150rpx;
	}

	.cu-dialog {
		background: #FFFFFF;
		overflow: visible;
	}

	.icon-style {
		width: 50rpx;
		font-size: 20px;
	}

	.nav-list {
		display: flex;
		flex-wrap: wrap;
		padding: 0px 40upx 0px;
		justify-content: space-between;
	}

	.nav-li {
		padding: 22upx;
		border-radius: 12upx;
		width: 45%;
		margin: 0 2.5% 40upx;
		background-image: url(../../static/me/NyU04x.png);
		background-size: cover;
		background-position: center;
		position: relative;
		z-index: 1;
	}

	.nav-li::after {
		content: "";
		position: absolute;
		z-index: -1;
		background-color: inherit;
		width: 100%;
		height: 100%;
		left: 0;
		bottom: -10%;
		border-radius: 10upx;
		opacity: 0.2;
		transform: scale(0.9, 0.9);
	}

	.nav-li.cur {
		color: #fff;
		background: rgb(94, 185, 94);
		box-shadow: 4upx 4upx 6upx rgba(94, 185, 94, 0.4);
	}

	.nav-name {
		font-size: 28upx;
		text-transform: Capitalize;
		position: relative;
	}

	.nav-name::before {
		content: "";
		position: absolute;
		display: block;
		width: 40upx;
		height: 6upx;
		background: #fff;
		bottom: 0;
		right: 0;
		opacity: 0.5;
	}

	.nav-name::after {
		content: "";
		position: absolute;
		display: block;
		width: 100upx;
		height: 1px;
		background: #fff;
		bottom: 0;
		right: 40upx;
		opacity: 0.3;
	}

	.nav-name::first-letter {
		font-weight: bold;
		font-size: 36upx;
		margin-right: 1px;
	}

	.nav-li text {
		position: absolute;
		right: 30upx;
		top: 30upx;
		font-size: 52upx;
		width: 60upx;
		height: 60upx;
		text-align: center;
		line-height: 60upx;
	}

	// 好玩动态
	.dong {
		z-index: 9999;
		position: fixed;
		top: -40px;
		right: -80px;
		transform: scale(0.24);
		-webkit-transform: scale(0.24);
		-moz-transform: scale(0.24);

	}

	.monster {
		transform: rotate(-50deg);
		-ms-transform: rotate(-50deg);
		/* IE 9 */
		-moz-transform: rotate(-50deg);
		/* Firefox */
		-webkit-transform: rotate(-50deg);
		/* Safari 和 Chrome */
		-o-transform: rotate(-50deg);
		/* Opera */
		display: flex;
		justify-content: center;
		position: relative;
		width: 170px;
		height: 400px;
		border-top-left-radius: 200px;
		border-top-right-radius: 200px;
		background-color: #3C47D7;
		box-shadow: 20px 20px 60px #4650E5;
	}

	.monster__face {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: absolute;
		top: 14%;
		width: 75%;
		height: 160px;
	}

	.monster__noses {
		top: 50%;
		display: flex;
		justify-content: space-between;
		width: 28%;
		height: auto;
		margin-bottom: 10px;
	}

	.monster__nose {
		width: 8px;
		height: 12px;
		border-radius: 20px;
		background: rgba(0, 0, 0, 0.5);
		box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.1);
	}

	.monster__mouth {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		width: 100%;
		height: 0%;
		overflow: hidden;
		border: 25px solid #FFC333;
		border-radius: 100px;
		background-color: #810332;
		animation: mouth 1.75s infinite;
		box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
		box-sizing: border-box;
	}

	.monster__mouth::before {
		content: '';
		position: absolute;
		width: 150px;
		height: 80px;
		border-radius: 100px;
		background-color: #400018;
	}

	.monster__mouth::after {
		content: '';
		position: absolute;
		bottom: -80px;
		width: 160px;
		height: 80px;
		border-top-left-radius: 50%;
		border-top-right-radius: 50%;
		background-color: #DC1B50;
		animation: tongue 1.75s infinite;
	}

	.monster__top {
		position: absolute;
		top: -30px;
		width: 170px;
		height: 30px;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		background-color: #ffffff;
		z-index: 100;
		animation: t 1.75s infinite;
	}

	.monster__bottom {
		position: absolute;
		bottom: 0;
		width: 100px;
		height: 30px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		background-color: #ffffff;
		z-index: 100;
		animation: b 1.75s infinite;
	}


	.avatar-eye {
		position: absolute;
		top: -10%;
		width: 65px;
		height: 65px;
		background: linear-gradient(105deg, white, #cb87f4);
		border-radius: 100%;
		box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
		margin: 3px;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}


	.avatar-eye--green {
		background: linear-gradient(to bottom, #fdfdfd, #c3efea);
	}

	.avatar-eye--violet {
		background: linear-gradient(to bottom, #fdfdfd, #e6d6f6);
	}


	.eye--left {
		left: 10%;
	}

	.eye--right {
		left: 85%;
	}

	.eye--center {
		left: 45%;
		top: 10%;
	}

	.avatar-eye-pupil {
		position: absolute;
		width: 55%;
		height: 55%;
		left: 50%;
		top: 25%;
		-webkit-transform: translate(-50%);
		transform: translate(-50%);
		z-index: 100;
		border-radius: 100%;
	}


	.pupil--green {
		background: linear-gradient(135deg, rgba(188, 248, 177, 0.7), #2fa38c 75%);
	}

	.pupil--pink {
		background: linear-gradient(135deg, #f1a183, #8535cd);
	}


	.avatar-eye-pupil-blackThing {
		position: absolute;
		width: 55%;
		height: 55%;
		left: 50%;
		top: 25%;
		background: #2c2f32;
		-webkit-transform: translate(-50%);
		transform: translate(-50%);
		border-radius: 100%;
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	}

	.avatar-eye-pupil-lightReflection {
		position: absolute;
		width: 7px;
		height: 7px;
		left: 25%;
		top: 10%;
		background: #ebebeb;
		-webkit-transform: translate(-50%);
		transform: translate(-50%);
		border-radius: 100%;
		box-shadow: 10px 10px 10px rgba(255, 255, 255, 0.2);
	}

	/**/
	@keyframes t {

		0%,
		10%,
		80%,
		100% {
			top: -30px;
		}

		20% {
			top: 0px;
		}

		30% {
			top: -20px;
		}

		40% {
			top: -0px;
		}

		50% {
			top: -25px;
		}

		70% {
			top: 0px;
		}
	}

	@keyframes b {

		0%,
		10%,
		80%,
		100% {
			bottom: -30px;
		}

		20% {
			bottom: 0px;
		}

		30% {
			bottom: -20px;
		}

		40% {
			bottom: -0px;
		}

		50% {
			bottom: -25px;
		}

		70% {
			bottom: 0px;
		}
	}

	@keyframes mouth {

		0%,
		10%,
		100% {
			width: 100%;
			height: 0%;
		}

		15% {
			width: 90%;
			height: 30%;
		}

		20% {
			width: 50%;
			height: 70%;
		}

		25% {
			width: 70%;
			height: 70%;
		}

		30% {
			width: 80%;
			height: 60%;
		}

		35% {
			width: 60%;
			height: 70%;
		}

		40% {
			width: 55%;
			height: 75%;
		}

		45% {
			width: 50%;
			height: 90%;
		}

		50% {
			width: 40%;
			height: 70%;
		}

		55% {
			width: 70%;
			height: 95%;
		}

		60% {
			width: 40%;
			height: 50%;
		}

		65% {
			width: 100%;
			height: 60%;
		}

		70% {
			width: 100%;
			height: 70%;
		}

		75% {
			width: 90%;
			height: 70%;
		}

		80% {
			width: 50%;
			height: 70%;
		}

		85% {
			width: 90%;
			height: 50%;
		}

		85% {
			width: 40%;
			height: 70%;
		}

		90% {
			width: 90%;
			height: 30%;
		}

		95% {
			width: 100%;
			height: 10%;
		}
	}

	@keyframes tongue {

		0%,
		20%,
		100% {
			bottom: -80px;
		}

		30%,
		90% {
			bottom: -40px;
		}

		40% {
			bottom: -45px;
		}

		50% {
			bottom: -50px;
		}

		70% {
			bottom: -80px;
		}

		90% {
			bottom: -40px;
		}
	}


	// 顶部流星
	.space {
		position: absolute;
		top: 0;
		left: 0;
	}

	.planet {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		background: #333;
		position: absolute;
		left: 50%;
		top: 50%;
		margin: -75rpx 0 0 -75rpx;
		overflow: hidden;
		z-index: 2;
	}

	.planet_shadow {
		position: absolute;
		border-radius: 50%;
		height: 100%;
		width: 100%;
		top: -40%;
		right: -10%;
		border: 35rpx solid rgba(0, 0, 0, .15);
	}

	.star {
		display: block;
		width: 5rpx;
		height: 5rpx;
		border-radius: 50%;
		background: #FFF;
		top: 100rpx;
		left: 400rpx;
		position: relative;
		transform-origin: 100% 0;
		animation: star-ani 6s infinite ease-out;
		box-shadow: 0 0 5rpx 5rpx rgba(255, 255, 255, .3);
		opacity: 0;
		z-index: 2;
	}

	.star:after {
		content: '';
		display: block;
		top: 0rpx;
		left: 4rpx;
		border: 0rpx solid #fff;
		border-width: 0rpx 90rpx 2rpx 90rpx;
		border-color: transparent transparent transparent rgba(255, 255, 255, .3);
		transform: rotate(-45deg) translate3d(1rpx, 3rpx, 0);
		box-shadow: 0 0 1rpx 0 rgba(255, 255, 255, .1);
		transform-origin: 0% 100%;
		animation: shooting-ani 3s infinite ease-out;
	}

	.pink {
		top: 30rpx;
		left: 395rpx;
		background: #ff5a99;
		animation-delay: 5s;
		-webkit-animation-delay: 5s;
		-moz-animation-delay: 5s;
	}

	.pink:after {
		border-color: transparent transparent transparent #ff5a99;
		animation-delay: 5s;
		-webkit-animation-delay: 5s;
		-moz-animation-delay: 5s;
	}

	.blue {
		top: 35rpx;
		left: 432rpx;
		background: cyan;
		animation-delay: 7s;
		-webkit-animation-delay: 7s;
		-moz-animation-delay: 7s;
	}

	.blue:after {
		/* border-color: transpareanimation-delay: 12s; */
		-webkit-animation-delay: 7s;
		-moz-animation-delay: 7s;
		animation-delay: 7s;
	}

	.yellow {
		top: 50rpx;
		left: 600rpx;
		background: #ffcd5c;
		animation-delay: 5.8s;
	}

	.yellow:after {
		border-color: transparent transparent transparent #ffcd5c;
		animation-delay: 5.8s;
	}

	@keyframes star-ani {
		0% {
			opacity: 0;
			transform: scale(0) rotate(0) translate3d(0, 0, 0);
			-webkit-transform: scale(0) rotate(0) translate3d(0, 0, 0);
			-moz-transform: scale(0) rotate(0) translate3d(0, 0, 0);
		}

		50% {
			opacity: 1;
			transform: scale(1) rotate(0) translate3d(-200rpx, 200rpx, 0);
			-webkit-transform: scale(1) rotate(0) translate3d(-200rpx, 200rpx, 0);
			-moz-transform: scale(1) rotate(0) translate3d(-200rpx, 200rpx, 0);
		}

		100% {
			opacity: 0;
			transform: scale(1) rotate(0) translate3d(-300rpx, 300rpx, 0);
			-webkit-transform: scale(1) rotate(0) translate3d(-300rpx, 300rpx, 0);
			-moz-transform: scale(1) rotate(0) translate3d(-300rpx, 300rpx, 0);
		}
	}
</style>